<template>
  <div class="mysecret">
    <div class="secret">
      <p>请选择哪些人可以看到您的日记</p>
      <select @change="myUpdate">
        <option value="1" :selected="onlyMe == true ? 'selected' : ''">
          只有我自己
        </option>
        <option value="2" :selected="onlyMe == false ? 'selected' : ''">
          大家
        </option>
      </select>
      <div class="text">
        <p>
          当设置"只有我自己"选项后, 您的日志将只有您自己能看到。
          同时,您也不会出现在网站的用户列表中。
        </p>
      </div>
      <div class="btn-sure">
        <button @click="sureUpdate">确认修改</button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "secret",
  data() {
    return {
      value: 0,
    };
  },
  methods: {
    myUpdate(event) {
      let selectValue = event.target.selectedIndex;
      // console.log(selec tValue);
      this.value = selectValue;
    },
    sureUpdate() {
      if (this.value == 0) {
        this.$store.state.onlyMe = true;
      } else {
        this.$store.state.onlyMe = false;
      }
      alert("修改成功")
    },
  },
  computed: {
    ...mapState(["onlyMe"]),
  },
};
</script>

<style lang="less" scoped>
.mysecret {
  width: 100%;
  .secret {
    width: 100%;
    padding-top: 20px;
    select {
      margin: 10px 0;
      font-size: 18px;
      color: #444444;
      padding: 2px 3px;
      box-sizing: border-box;
      outline: none;
    }
    .text {
      width: 200px;
      p {
        line-height: 22px;
        color: #909090;
      }
    }
    .btn-sure {
      margin-top: 20px;
      button {
        padding: 3px 8px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 16px;
        color: #808080;
        cursor: pointer;
        &:active {
          color: #000;
        }
      }
    }
  }
}
</style>